<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 vector-feature-night-mode-enabled skin-theme-clientpref-os vector-sticky-header-enabled" lang="fr" dir="ltr"><head>
<meta charset="UTF-8">
<title>Open Graph Protocol</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://fr.wikipedia.org/wiki/Open_Graph_Protocol"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Open_Graph_Protocol rootpage-Open_Graph_Protocol skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Open Graph Protocol</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="fr" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="fr" dir="ltr">
<p><i><b>Open Graph</b></i> est un protocole créé par <a href="Facebook" title="Facebook">Facebook</a>, qui s'inspire du <a href="Dublin_Core" title="Dublin Core">Dublin Core</a>, des <a href="Microformats" class="mw-redirect" title="Microformats">Microformats</a>, et du <a href="RDFa" title="RDFa">RDFa</a>. Cette technologie a été créée par Facebook en 2010<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>, puis confiée à l'Open Web Foundation <a href="https://en.wikipedia.org/wiki/Open_Web_Foundation" class="extiw external" title="en:Open Web Foundation"><span class="indicateur-langue" title="Article en anglais : « Open Web Foundation »">(en)</span></a> <sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>.
</p>
<div class="mw-heading mw-heading2"><h2 id="Descriptif">Descriptif</h2></div>
<p><i>Open Graph</i> permet d'optimiser le contenu d'une <a href="Page_web" title="Page web">page web</a> afin que les utilisateurs puissent la partager sur les principaux réseaux sociaux Facebook, <a href="Twitter" class="mw-redirect" title="Twitter">Twitter</a>, LinkedIn<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>... Ce protocole facilite le partage depuis un ordinateur, le navigateur d'un <a href="Smartphone" title="Smartphone">smartphone</a> ou une application mobile<sup id="cite_ref-:0_4-0" class="reference"><a href="#cite_note-:0-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>.
</p><p>Selon le site officiel, ce protocole <span class="citation">« est utilisé sur Facebook pour permettre à une page web de bénéficier des mêmes fonctionnalités que n'importe quel autre objet sur Facebook »</span><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>
</p><p>Les moteurs de recherches utilisent ce protocole pour mieux comprendre le contenu d'une page web<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Balises_Open_Graph">Balises Open Graph</h2></div><p>
Voici un exemple des balises <i>Open Graph</i> à utiliser<sup id="cite_ref-:0_4-1" class="reference"><a href="#cite_note-:0-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>:</p><div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="nt"><meta</span><span class="w"> </span><span class="na">property=</span><span class="s">"og:title"</span><span class="w"> </span><span class="na">content=</span><span class="s">"titre de l'article"</span><span class="nt">/></span>
<span class="nt"><meta</span><span class="w"> </span><span class="na">property=</span><span class="s">"og:type"</span><span class="w"> </span><span class="na">content=</span><span class="s">"article"</span><span class="nt">/></span>
<span class="nt"><meta</span><span class="w"> </span><span class="na">property=</span><span class="s">"og:url"</span><span class="w"> </span><span class="na">content=</span><span class="s">"http://exemple.com/exemple-titre-article"</span><span class="nt">/></span>
<span class="nt"><meta</span><span class="w"> </span><span class="na">property=</span><span class="s">"og:image"</span><span class="w"> </span><span class="na">content=</span><span class="s">"http://exemple.com/article_thumbnail.jpg"</span><span class="nt">/></span>
<span class="nt"><meta</span><span class="w"> </span><span class="na">property=</span><span class="s">"og:description"</span><span class="w"> </span><span class="na">content=</span><span class="s">"Cet article présente le protocole Open Graph"</span><span class="nt">/></span>
</pre></div>
<div class="mw-heading mw-heading2"><h2 id="Notes_et_références"><span id="Notes_et_r.C3.A9f.C3.A9rences"></span>Notes et références</h2></div>
<div class="references-small decimal" style=""><div class="mw-references-wrap"><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a> </span><span class="reference-text"><span class="ouvrage"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> « <a rel="nofollow" class="external text" href="https://www.computerhope.com/jargon/o/open-graph.htm"><cite style="font-style:normal;" lang="en">What is Open Graph?</cite></a> », sur <span class="italique">www.computerhope.com</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2019-05-11" data-sort-value="2019-05-11">11 mai 2019</time>)</small></span></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="http://www.openwebfoundation.org/faqs/users-of-owf-agreements"><cite style="font-style:normal;">Some Users of OWF Agreements - Open Web Foundation</cite></a> », sur <span class="italique">www.openwebfoundation.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2019-05-11" data-sort-value="2019-05-11">11 mai 2019</time>)</small></span></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://www.yakaferci.com/open-graph/"><cite style="font-style:normal;">Enjeux et impact des balises Open Graph sur le SEO - référencement (Yakaferci)</cite></a> », sur <span class="italique">Yakaferci</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2019-05-11" data-sort-value="2019-05-11">11 mai 2019</time>)</small></span></span>
</li>
<li id="cite_note-:0-4"><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://developers.facebook.com/docs/sharing/webmasters"><cite style="font-style:normal;">Administrateurs de sites - Partage - Documentation</cite></a> », sur <span class="italique">Facebook for Developers</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2019-05-11" data-sort-value="2019-05-11">11 mai 2019</time>)</small></span></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a> </span><span class="reference-text"><span class="citation not_fr_quote" lang="en">« <span class="italique">The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.</span> »</span></span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a> </span><span class="reference-text"><span class="ouvrage" id="2013">« <cite style="font-style:normal">Optimiser le visuel des publications sur Facebook</cite> », <i>Astuces Facebook</i>, <time class="nowrap" datetime="2013-06-07" data-sort-value="2013-06-07">7 juin 2013</time> <small style="line-height:1em;">(<a rel="nofollow" class="external text" href="http://astuces-fb.com/optimiser-le-visuel-des-publications-sur-facebook-infographie.html">lire en ligne</a>, consulté le <time class="nowrap" datetime="2017-01-27" data-sort-value="2017-01-27">27 janvier 2017</time>)</small><span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=Optimiser+le+visuel+des+publications+sur+Facebook&rft.jtitle=Astuces+Facebook&rft.date=2013-06-07&rfr_id=info%3Asid%2Ffr.wikipedia.org%3AOpen+Graph+Protocol"></span></span></span>
</li>
</ol></div>
</div>
<div class="mw-heading mw-heading2"><h2 id="Liens_externes">Liens externes</h2></div>
<ul><li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://opengraphprotocol.org/">The Open Graph Protocol (site officiel)</a></li>
<li><a rel="nofollow" class="external text" href="https://opengraph.dev/?lang=fr">Outil pour balises méta et images OG (opengraph.dev)</a></li></ul>
<div class="navbox-container" style="clear:both;">
</div>
<ul id="bandeau-portail" class="bandeau-portail"><li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail d’Internet</span> </span></li> </ul></div><!--htdig_noindex--><div><div class="zim-footer">
Cet article est issu de <a class="external text" title="Dernière modification le 2025-07-06" href="https://fr.wikipedia.org/wiki/?title=Open_Graph_Protocol&oldid=227053553">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>